<template>
  <div>

    <a-row :gutter="10">
      <a-col :span="4">
        <a-button type="primary" @click="showAddCmpDialog">添加校区</a-button>
      </a-col>
    </a-row>

    <a-table :columns="columns" :data-source="campusList" style="margin-top: 10px">
      <template #headerCell="{ column }">
        <template v-if="column.key === 'campusName'">
        <span>
          校区名称
        </span>
        </template>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'campusName'">
          <a>
            {{ record.campusName }}
          </a>
        </template>

        <template v-else-if="column.key === 'action'">
        <span>
          <a @click="edit(record)">编辑</a>
          <a-divider type="vertical"/>
                  <a-popconfirm
                      v-if="campusList.length"
                      title="Sure to delete?"
                      @confirm="() => del(record)"
                  >
          <a>Delete</a>
                  </a-popconfirm>
          <a-divider type="vertical"/>
        </span>
        </template>
      </template>
    </a-table>

    <a-modal v-model:visible="visible" title="添加校区" @ok="handleOk" :confirm-loading="confirmLoading">
      <a-form
          :model="formState"
          v-bind="layout"
          name="nest-messages"
          :validate-messages="validateMessages"
      >
        <a-form-item :name="['campus', 'campusName']" label="校区名称" :rules="[{ required: true }]">
          <a-input v-model:value="formState.campus.campusName"/>
        </a-form-item>
        <a-form-item :name="['campus', 'campusAddress']" label="校区地址" :rules="[{ required: true }]">
          <a-input v-model:value="formState.campus.campusAddress"/>
        </a-form-item>
      </a-form>
    </a-modal>


    <a-modal v-model:visible="editVisible" title="更新校区" @ok="handleEdit" :confirm-loading="confirmLoading">
      <a-form
          :model="formState"
          v-bind="layout"
          name="nest-messages"
          :validate-messages="validateMessages"
      >
        <a-form-item :name="['editCampus', 'campusName']" label="校区名称" :rules="[{ required: true }]">
          <a-input v-model:value="formState.editCampus.campusName"/>
        </a-form-item>
        <a-form-item :name="['editCampus', 'campusAddress']" label="校区地址" :rules="[{ required: true }]">
          <a-input v-model:value="formState.editCampus.campusAddress"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import {onBeforeMount, reactive, ref} from "vue";
import {getCampusList, add, update, delById} from "@/apis/campus";
import {message} from "ant-design-vue";

export default {
  name: "Campus",
  setup() {

    const columns = [{
      name: 'campusName',
      dataIndex: 'campusName',
      key: 'campusName',
    },
      {
        title: '校区地址',
        dataIndex: 'campusAddress',
        key: 'campusAddress',
      }, {
        title: 'Action',
        key: 'action',
      }];

    const layout = {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 20,
      },
    };
    const validateMessages = {
      required: '${label} is required!',
      types: {
        email: '${label} is not a valid email!',
        number: '${label} is not a valid number!',
      },
      number: {
        range: '${label} must be between ${min} and ${max}',
      },
    };
    const formState = reactive({
      campus: {
        campusId: '',
        campusName: '',
        campusAddress: '',
      },
      editCampus: {
        campusId: '',
        campusName: '',
        campusAddress: '',
      },

    });

    const visible = ref(false);
    const editVisible = ref(false);

    const confirmLoading = ref(false)

    const campusList = ref([])

    const getCmpList = () => {
      getCampusList().then(res => {
        console.log(res)
        campusList.value = res.data
      })
    }

    onBeforeMount(() => {
      getCmpList()
    })

    const showAddCmpDialog = () => {
      visible.value = true
    }

    const handleOk = () => {
      confirmLoading.value = true;
      setTimeout(() => {
        add(formState.campus).then(res => {
          if (res.status === '0') {
            message.success("操作成功");
          }
        })
        confirmLoading.value = false;
        visible.value = false
        getCmpList()
      }, 1000)

    }

    const edit = (row) => {
      editVisible.value = true;
      formState.editCampus.campusName = row.campusName
      formState.editCampus.campusId = row.campusId
      formState.editCampus.campusAddress = row.campusAddress
    }

    const del = (row) => {
      delById(row.campusId).then(res => {
        if (res.status === '0') {
          message.success("操作成功");
        }
      })
      getCmpList();
    }

    const handleEdit = () => {
      confirmLoading.value = true;
      setTimeout(() => {
        update(formState.editCampus).then(res => {
          if (res.status === '0') {
            message.success("操作成功");
          }
        })
        confirmLoading.value = false;
        editVisible.value = false;
        getCmpList()
      }, 1000)
    }


    return {
      columns,
      campusList,
      showAddCmpDialog,
      visible,
      handleOk,
      formState,
      validateMessages,
      layout,
      confirmLoading,
      edit,
      del,
      editVisible,
      handleEdit,
    }
  },
}
</script>

<style scoped>

</style>